A HTML tag-ek felépítése

A tag-ekről, kicsit részletesebben

Mint már az előzőekben láthattuk, a HTML tag-ek kacsacsőrök közé vannak írva. Ez különbözteti meg őket a kiírandó szövegektől. A weboldal forrása tehát igazából kétféle dologból áll: a tag-ekből és a szövegekből: a tag-ek megmutatják hogyan kell, a szövegek pedig hogy mit kell megjeleníteni az oldalon. A teg-ek mindig "bekeretezik" a kiírandó szöveget, ami a "keretben" van, az lesz a megadott formátumú. (Pl. középre igazított, vagy nagybetűs.)

Eddig csak egyszerű tag-eket láttunk (bár a META tag kivétel volt), most nézzük meg a tag-ek általános felépítését. A legtöbb tag-nek lehetnek tulajdonságai. Ezeket attribútumoknak nevezzük, az egyes tag-ek tulajdonságait változtatják meg. Egy tag-nek több attribútuma is lehet, ezek sorrendje lényegtelen, bármilyen sorrendben használhatjuk őket. A könnyebb érthetőség kedvéért lássunk két példát:



Az első példában (<H1>) láthatjuk, hogy csak a tag áll önmagában. Ez nem jelenti azt, hogy a H1 tag-nek nem lehetnek attribútumai, de most éppen nem adtam neki. A második esetben viszont a <BODY> tag-nek (amely ugye a HTML oldalunk törzsét kezdő tag) adtunk egy bgcolor attribútumot. Ez az attribútum meghatározza, hogy milyen színű legyen a weblapunk háttere az eredeti, unalmas fehér szín helyett. Hogy ez melyik szín legyen, azt az attribútum után következő egyenlőségjel után található érték határozza meg. Jelenleg egy halványsárga színt kapunk eredményül, ami máris vidámabb, mint a fehér. (Ez a sárga, ami a jelenlegi weblap alapja is!) Ha esetleg nem lennél tisztában miért halványsárga az #FFFFC0 kódsorozat, kattints a bal oldalon található izzó ikonra!

Tehát FONTOS: az attribútum után mindig áll egy egyenlőségjel, majd utána egy érték, amit általában idézőjelbe teszünk. Ehhez képest csak igen kevés kivétellel találkozhatunk, azokat külön megemlítem.

Lássunk arra is egy példát, amikor több attribútumot használunk:

<IMG src="minta.jpg" width="300" height="200" border="1" alt="Ez lesz a mintakép">

Az fenti példában található egy HTML tag (IMG), majd 5 attribútum-érték páros. Mindegyik páros áll egy attribútumból, egy egyenlőségjelből, majd egy idézőjelek közé tett értékből. Hogy most melyik mit jelent, arra ráérünk később is! Viszont fontos, hogy a párosok sorrendje lényegtelen, tehát írhattam volna előre az alt attribútumot, természetesen ilyenkor vele kell vinnem a hozzá tartozó értéket is! Az attribútum és az érték sosem választható el egymástól!


iDevice ikon Hogy biztosak lehessünk benne...
Arra kérlek, hogy nézd végig az alábbi forráskód részletet, majd karikázd be valamilyen színnel a tag-eket, továbbá egy másik színnel az attribútum-érték párosokat. Szorgalmi feladatként kösd össze (ahol lehetséges) a kezdő és zárótag-eket.
(Hogy ne a monitort kelljen összefirkálnod, egy PDF formátumú lapot kapsz, amit nyomtass ki magadnak, s azon oldd meg a feladatot!)

Feladat letöltése (73 642 byte)